<template>
	<view class="monitoring">
		<view class="check-top">
			<uni-easyinput class="top-input" trim="all" v-model="params.name" placeholder="请输入单位名称"
				:inputBorder="false">
				<template #right><text style="margin-right: 24rpx;">
						<uni-icons type="search" size="24" color='#a6a6a6' @click="getcheckList"></uni-icons>
					</text></template>
			</uni-easyinput>
			<view class="top-select">
				<view class="area-select" @click="toggle('bottom')">
					<text class="text">{{areaname}}</text>
					<uni-icons type="down" size="13" color='#a6a6a6' v-if="areaname == '所在位置'"></uni-icons>
					<view class="" @click.stop="cleararea()">
						<uni-icons type="clear" size="13" color='#a6a6a6' v-if="areaname != '所在位置'"></uni-icons>
					</view>
				</view>
				<view class="select-type">
					<uni-data-select v-model="params.typeId" :localdata="unittypeList" @change="change"
						placeholder='单位类型'></uni-data-select>
				</view>
				<uni-data-select v-model="params.levelId" style="width: 10rpx;" :localdata="unitlevelList"
					@change="change" placeholder='单位级别'></uni-data-select>
				<view class="filter">
					<image src="../../static/images/filter.png" mode="aspectFill" style="width: 30rpx;height: 30rpx;"
						@click="toggle('right')">
					</image>
				</view>
			</view>
			<view class="bottom-search">
				<view class="search-item" :class="{ active: activeindex === '' }" @click="handlertab('')">
					全部({{ allData || 0 }})</view>
				<view class="search-item" :class="{ active: activeindex === 0 }" @click="handlertab(0)">
					未置中({{ atDisposal || 0 }})</view>
				<view class="search-item" :class="{ active: activeindex ===1 }" @click="handlertab(1)">
					已处置({{ disposed || 0 }})</view>
			</view>
			<view class="check-total">
				<view class="total">
					共<text>{{total}} 条</text>结果
				</view>
				<view class="filter">
					<uni-data-select v-model="params.sortField" :localdata="timelist" @change="change()"
						style="width: 280rpx;" placeholder='按创建时间降序'></uni-data-select>
				</view>
			</view>
		</view>
		<!-- 内容区 -->
		<view class="check-bottom">
			<view v-if="monitoringData.length>0">
				<view class="table-item" v-for="(item,index) in monitoringData" :key="index"
					@click="editInfo('bottom',item)">
					<view class="item-title">
						<text class="titletext">{{item.name}}</text>
						<view :class="'item-tab' + item.checkStatus ">
							{{item.checkStatus==0?'未处置':'已处置'}}
						</view>
					</view>
					<view class="item-content">
						<view class="content-title">
							<view class="htitle">所属地址：</view>
							<text class="content-text">{{ item.areaName}}</text>
						</view>
						<view class="content-title">
							<view class="htitle">预警类型：</view>
							<text class="content-text">{{item.alarmTypeName }}</text>
						</view>
						<view class="content-title">
							<view class="htitle">预警时间：</view>
							<text class="content-text">{{item.alarmDate.slice(0,11)}}</text>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-else text="暂无数据" iconColor="#70a7fd" textColor="#85878B" mode="data"></u-empty>
		</view>
		<!-- 详情弹窗 -->
		<!-- 区域选择弹窗 -->
		<uni-popup ref="monitoringpopup" background-color="#fff" @touchmove.prevent>
			<view class="monitoring-content">
				<view class="titleInfo">
					<view class="monitoringTtitle">预警详情</view>
					<uni-icons type="closeempty" size="24" color="#333333" @click="closeMonitor"></uni-icons>
				</view>
				<view class="textTitle">{{monitDetailInfo.name}}</view>
				<view class="texteInfo"><text class="texteLsft">预警时间：</text><text
						class="time">{{monitDetailInfo.alarmDate}}</text>
				</view>
				<view class="texteInfo"><text class="texteLsft">预警内容：</text>
					<text class="time">
						{{monitDetailInfo.alarmDescription}}
					</text>
				</view>
				<view class="titleHeavyInfo">
					<view class="texteInfo"><text class="texteLsft">监测状态：</text><text
							class="time">{{monitDetailInfo.checkStatus==1?'已处置':'未处置'}}</text></view>
					<view class="texteInfo"><text class="texteLsft">解除原因：</text><text
							class="time">{{monitDetailInfo.disposalContent?monitDetailInfo.disposalContent:'--'}}</text>
					</view>
				</view>
				<button class="btn" size="mini" @click="heavyTo(monitDetailInfo.institutionId)">查看单位详情</button>
			</view>
		</uni-popup>
		<uni-popup ref="popup" background-color="#fff" border-radius="30rpx 30rpx 0 0" @touchmove.prevent>
			<view class="popup-content">
				<view class="popup-content-title">
					<text>请选择所在区域</text>
					<view class="popup-content-close">
						<uni-icons type="closeempty" size="20" color='#a6a6a6' @click="closepop"></uni-icons>
					</view>
				</view>
				<view class="popup-content-content">
					<view class="content-select">
						<view class="select-item" @click="handlerregion(1)">
							<view class="content-step">
								<view class="whiteline"></view>
								<view :class="params.provinceId ?'dot':'undot'"></view>
								<view :class="params.provinceId?'line':'whiteline'"></view>
							</view>
							<view class="content-text">
								<text :style="{color: step == 1?'#00aff1':'#a6a6a6'}">{{provinceName}}</text><uni-icons
									type="right" size="20" color='#a6a6a6'></uni-icons>
							</view>
						</view>
						<view class="select-item" @click="handlerregion(2)" v-if='params.provinceId'>
							<view class="content-step">
								<view class="line"></view>
								<view :class="params.cityId ?'dot':'undot'"></view>
								<view :class="params.cityId ?'line':'whiteline'"></view>
							</view>
							<view class="content-text">
								<text :style="{color: step == 2?'#00aff1':'#a6a6a6'}">{{cityName}}</text><uni-icons
									type="right" size="20" color='#a6a6a6'></uni-icons>
							</view>
						</view>
						<view class="select-item" @click="handlerregion(3)" v-if='params.cityId'>
							<view class="content-step">
								<view class="line"></view>
								<view :class="params.zoneId ?'dot':'undot'"></view>
								<view :class="params.zoneId ?'line':'whiteline'"></view>
							</view>
							<view class="content-text">
								<text :style="{color: step == 3?'#00aff1':'#a6a6a6'}">{{zoneName}}</text><uni-icons
									type="right" size="20" color='#a6a6a6'></uni-icons>
							</view>
						</view>
						<view class="select-item" @click="handlerregion(4)" v-if='params.zoneId'>
							<view class="content-step">
								<view class="line"></view>
								<view :class="params.streetId ?'dot':'undot'"></view>
								<view class="whiteline"></view>
							</view>
							<view class="content-text">
								<text :style="{color: step == 4?'#00aff1':'#a6a6a6'}">{{streetName}}</text><uni-icons
									type="right" size="20" color='#a6a6a6'></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="area-title">{{selecttitle}}</view>
				<view class="popup-content-area">
					<view class="area-content">
						<view
							:class="params.provinceId==item.value||params.cityId==item.value||params.zoneId==item.value||params.streetId==item.value ?'active':''"
							class="area-item" v-for="(item,index) in options" :key='index' @click="selectarea(item)">
							<text>{{item.label}}</text><uni-icons type="checkmarkempty" size="16"
								:color="params.provinceId==item.value||params.cityId==item.value||params.zoneId==item.value||params.streetId==item.value?'#00aff1':'#a6a6a6'"></uni-icons>
						</view>
					</view>
				</view>
				<view class="popup-content-button">
					<u-button type="primary" @click="determine">确定</u-button>
				</view>
			</view>
		</uni-popup>
		<!-- 筛选弹窗 -->
		<uni-popup ref="filterpopup" background-color="#fff" border-radius="30rpx  0  0 30rpx" @touchmove.prevent>
			<view class="filterpopup-content">
				<view class="filterpopup-title">
					更多筛选
				</view>
				<view class="industry">
					<view class="industry-title">
						所属行业:
					</view>
					<view class="industry-content">
						<view class="industry-item" v-for="(item,index) in supervisorList" :key='index'
							@click="selectfilter(1,item)" :class="params.industryId==item.dictValue ?'active':''">
							<!-- {{item.dictLabel}} -->
							<up-tooltip :buttons="[item.dictLabel]" :text="item.dictLabel" direction="top"
								:showCopy='false'></up-tooltip>
						</view>
					</view>
				</view>
				<view class="industry">
					<view class="industry-title"> 预警类型: </view>
					<view class="industry-content">
						<view class="industry-item" v-for="(item, index) in earlyList" :key="index"
							@click="selectfilter(2, item)" :class="params.alarmType == item.dictValue ? 'active' : ''">
							<up-tooltip :buttons="[item.dictLabel]" :text="item.dictLabel" direction="top"
								:showCopy="false"></up-tooltip>
						</view>
					</view>
				</view>
				<view class="industry">
					<view class="industry-title"> 检查时间: </view>
					<view class="industry-content">
						<uni-datetime-picker v-model="params.dateRange" type="daterange" rangeSeparator="至" />
					</view>
				</view>
				<view class="filterpopup-button">
					<view class="reset" @click="reset">
						重置
					</view>
					<view class="confime" @click="confime">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	import {
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		getDictsApi,
		getAreaList
	} from "@/api/dict";
	import {
		getmonitorListCount,
		getalarmMonitor
	} from '@/api/monitoring.js'

	// 搜索参数
	let params = reactive({
		pageNum: 1,
		pageSize: 15,
		name: "",
		typeId: "",
		levelId: "",
		industryId: "",
		checkStatus: "",
		alarmType: null,
		region: [],
		dateRange: [],
		provinceId: "",
		cityId: "",
		zoneId: "",
		streetId: "",
		sortOrder: "DESC"
	});
	let activeindex = ref('')
	let areaname = ref('所在位置')
	let provinceName = ref('请选择省')
	let cityName = ref('请选择市')
	let zoneName = ref('请选择区')
	let streetName = ref('请选择街道 ')
	//下拉筛选框
	const change = (value) => {
		params.pageNum = 1
		getcheckList()
	}
	//处理详情
	const heavyTo = (id) => {
		uni.navigateTo({
			url: `/pages/unitDetails/unitDetails?institutionId=${id}`,

		});
	}
	//切换tab
	const handlertab = (index) => {
		activeindex.value = index
		params.checkStatus = index
		params.pageNum = 1
		params.pageSize = 15
		getcheckList()
	}
	//弹出区域选择
	let popup = ref(null)
	let filterpopup = ref(null)
	const toggle = (type) => {
		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
		switch (type) {
			case 'bottom':
				popup.value.open(type)
				break;
			case 'right':
				filterpopup.value.open(type)
				break;
			default:
				break;
		}
	}
	//关闭区域选择框
	const closepop = () => {
		popup.value.close()
	}
	const closeMonitor = () => {
		monitoringpopup.value.close()
	}
	const monitoringpopup = ref(null)
	const monitDetailInfo = ref({})
	const editInfo = async (type, item) => {
		monitoringpopup.value.open(type)
		monitDetailInfo.value = {
			...item
		}
	}
	/**
	 * @description: 状态数据
	 */
	let allData = ref(0)
	let atDisposal = ref(0)
	let disposed = ref(0)
	const checkStatusCount = () => {
		let countparams = JSON.parse(JSON.stringify(params))
		delete countparams.checkStatus
		getmonitorListCount({
				pageNum: params.pageNum,
				pageSize: params.pageSize,
			},
			countparams
		).then((res) => {
			allData.value = res.data.all
			atDisposal.value = res.data.not
			disposed.value = res.data.yes
		})
	}
	/**
	 * @description: 表格数据接口
	 */
	let monitoringData = ref([])
	const total = ref(0) //数据总条数
	const getcheckList = async (flag = true) => {
		if (params.dateRange) {
			if (params.dateRange.length > 0) {
				params.startDate = params.dateRange[0]
				params.endDate = params.dateRange[1]
			}
		} else {
			params.dateRange = []
			params.startDate = ''
			params.endDate = ''
		}
		const res = await getalarmMonitor({
				pageNum: params.pageNum,
				pageSize: params.pageSize
			},
			params
		)
		if (flag) {
			monitoringData.value = res.rows
			total.value = res.total
		} else {
			monitoringData.value = [...monitoringData.value, ...res.rows];
		}

	};
	//触底加载更多
	onReachBottom(() => {
		if (total.value <= monitoringData.value.length) {
			uni.showToast({
				title: '已经到底咯~',
				icon: 'none',
			});
			return;
		} else {
			params.pageNum++; // 每触发一次触底事件，页码加1
			getcheckList(false);
		}
	});
	/**
	 * @description: 获取字典
	 */
	// 单位类型下拉
	const unittypeList = ref([]);
	// 单位级别下拉
	const unitlevelList = ref([]);
	// 所属行业下拉
	const supervisorList = ref([]);
	//任务来源下拉
	const earlyList = ref([])
	//时间排序
	const timelist = ref([])
	//区域数据
	const options = ref([])
	async function getDicts() {
		await getDictsApi("institution_type").then((res) => {
			//单位类型下拉
			if (res.code === 200) {
				res.data = res.data.map((item, index) => {
					item.text = item.dictLabel
					item.value = item.dictValue
					return item
				})
				unittypeList.value = res.data;
			}
		});
		await getDictsApi("institution_industry_type").then((res) => {
			//行业主管下拉
			if (res.code === 200) {
				supervisorList.value = res.data;
			}
		});
		await getDictsApi("fkwz_institution_level_type").then((res) => {
			//单位级别下拉
			if (res.code === 200) {
				res.data = res.data.map((item, index) => {
					item.text = item.dictLabel
					item.value = item.dictValue
					return item
				})
				unitlevelList.value = res.data;
			}
		});
		await getDictsApi('task_alarm_type ').then((res) => {
			//预警类型
			if (res.code === 200) {
				earlyList.value = res.data
			}
		})
		await getDictsApi("alarm_monitor_date_order_type").then((res) => {
			//时间排序
			if (res.code === 200) {
				res.data = res.data.map((item, index) => {
					item.text = item.dictLabel
					item.value = item.dictValue
					return item
				})
				timelist.value = res.data;
			}
		});
		await getAreaList({
			pid: 1
		}).then((res) => {
			// console.log('options.value1', options.value)
			options.value = res.data;
		});
	}
	//获取区域数据
	const getArea = (pid) => {
		getAreaList({
			pid: pid
		}).then((res) => {
			// console.log('options.value2', options.value)
			options.value = res.data;
		});
	}
	/**
	 * @description: 联级处理省市区操作
	 * @param {String} type 类型
	 */
	let step = ref(1)
	const handlerregion = (value) => {
		step.value = value
		switch (value) {
			case 1:
				getArea(1)
				selecttitle.value = '请选择省'
				break;
			case 2:
				getArea(params.provinceId)
				selecttitle.value = '请选择市'
				break;
			case 3:
				getArea(params.cityId)
				selecttitle.value = '请选择区/县'
				break;
			case 4:
				getArea(params.zoneId)
				selecttitle.value = '请选择街道'
				break;

			default:
				break;
		}
	};
	//选择区域
	let selecttitle = ref('选择省')
	const selectarea = (item) => {
		switch (step.value) {
			case 1:
				cityName.value = '请选择市'
				zoneName.value = '请选择区'
				streetName.value = '请选择街道'
				params.cityId = null
				params.zoneId = null
				params.streetId = null
				getArea(item.value)
				params.provinceId = item.value;
				step.value = 2
				provinceName.value = item.label
				selecttitle.value = '选择市'
				break;
			case 2:
				zoneName.value = '请选择区'
				streetName.value = '请选择街道'
				params.zoneId = null
				params.streetId = null
				getArea(item.value)
				params.cityId = item.value;
				step.value = 3
				cityName.value = item.label
				selecttitle.value = '选择区/县'
				break;
			case 3:
				streetName.value = '请选择街道'
				params.streetId = null
				getArea(item.value)
				params.zoneId = item.value;
				step.value = 4
				zoneName.value = item.label
				selecttitle.value = '选择街道'
				break;
			case 4:
				getArea(item.value)
				params.streetId = item.value;
				step.value = 5
				streetName.value = item.label
				selecttitle.value = '请点击确定'
				break;
			default:
				break;
		}
	}
	const determine = () => {
		closepop()
		areaname.value = ''
		// console.log('params.provinceId', params.provinceId)
		areaname.value = [
			params.provinceId && provinceName.value,
			params.cityId && cityName.value,
			params.zoneId && zoneName.value,
			params.streetId && streetName.value
		].filter(Boolean).join(' ');
		params.pageNum = 1
		getcheckList()
	}

	//清除区域
	const cleararea = () => {
		areaname.value = '所在位置'
		params.provinceId = null
		params.cityId = null
		params.zoneId = null
		params.streetId = null
		provinceName.value = '请选择省'
		cityName.value = '请选择市'
		zoneName.value = '请选择区'
		streetName.value = '请选择街道 '
		step.value = 1
		getArea(1)
		getcheckList()
	}
	//筛选数据
	const selectfilter = (type, item) => {
		switch (type) {
			case 1:
				params.industryId = item.dictValue
				console.log(params.industryId)
				break;
			case 2:
				params.alarmType = item.dictValue
				break;
			default:
				break;
		}
	}
	//重置
	const reset = () => {
		params.dateRange = [];
		params.startDate = "";
		params.endDate = "";
		params.industryId = ''
		params.alarmType = null
		filterpopup.value.close()
		getcheckList()
	}
	//筛选
	const confime = () => {
		filterpopup.value.close()
		getcheckList()
	}
	onMounted(() => {
		getcheckList()
		checkStatusCount()
		getDicts();
	})
</script>

<style lang="scss" scoped>
	.monitoring {
		width: 100%;
		height: 100vh;
		background-color: #FAFAFA;

		.check-top {
			position: fixed;
			top: 0;
			box-sizing: border-box;
			padding: 20rpx 40rpx 0 40rpx;
			background-color: #ffffff;
			z-index: 10;
			width: 100vw;
			// border: 1px solid red;

			.bottom-search {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				color: #333333;

				.search-item {
					padding: 10rpx 54rpx;
					background: #BFD4E8;
					border-radius: 12rpx;
					color: #333333;
				}

				.active {
					color: #FFFFFF;
					background: linear-gradient(-90deg, #00C2D3, #00A7FF);
				}
			}

			.check-total {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
			}

			.top-input {
				border: 2rpx solid #70a7fd;
				border-radius: 60rpx;
				margin-bottom: 10rpx;
			}

			.top-select {
				display: flex;
				justify-content: space-between;


				:deep(.uni-select) {
					border: unset;
				}

				.area-select {
					width: 30%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 20rpx;
					color: #7a7a7a;

					// .text {
					// 	margin-right: 80rpx;
					// }
				}

				.select-type {
					width: 40%;
					// border: 1px solid red;

					:deep(.uni-select__input-text) {
						width: 60%;
						color: #333;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
						overflow: hidden;
					}

					:deep(.uni-select__selector) {
						width: 400rpx;
					}
				}

				.filter {
					display: flex;
					align-items: center;
					margin-left: 20rpx;

				}
			}

			:deep(.uni-easyinput__content) {
				background-color: transparent !important;
			}

		}

		.check-bottom {
			width: 92%;
			// height: calc(100vh - 230rpx);
			margin: auto;
			margin-top: 280rpx;
			background-color: #fafafa;

			// padding: 300rpx 40rpx 0 40rpx;
			// border: 1px solid red;
			// overflow-y: auto;
			:deep(.u-icon__icon) {
				top: 100rpx !important;
			}

			:deep(.u-empty__text) {
				margin-top: 140rpx;
			}

			.table-item {
				padding: 20rpx 26rpx;
				font-size: 24rpx;
				border-radius: 20rpx;
				margin-top: 20rpx;
				background-color: #ffffff;
				box-shadow: 0px 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);


				.item-title {
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #eeeeee;
					padding-bottom: 20rpx;
					margin-bottom: 12rpx;
					font-size: 28rpx;

					.titletext {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.item-tab0 {
						background-color: #c5defb;
						color: #5e9efd;
						padding: 3rpx 16rpx;
						border-radius: 20rpx;
					}

					.item-tab1 {
						background-color: #c5defb;
						color: #5e9efd;
						padding: 3rpx 16rpx;
						border-radius: 20rpx;
					}

					.item-tab2 {
						background-color: #c5defb;
						color: #5e9efd;
						padding: 3rpx 16rpx;
						border-radius: 20rpx;

					}

				}

				.item-content {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;


					.content-title {
						display: flex;
						font-size: 28rpx;
						color: #666666;
						line-height: 50rpx;

						.htitle {
							// width: 120rpx;
							// flex-shrink: 0;
						}

						.content-text {
							color: #333333;
						}
					}

					.content-title:nth-child(1) {
						display: flex;
						width: 100%;
						margin-bottom: 10rpx;

						// .htitle {
						// 	width: 120rpx;
						// 	flex-shrink: 0;
						// }
					}
				}
			}
		}

		.monitoring-content {
			display: flex;
			flex-direction: column;
			// position: relative;
			// height: 60vh;
			border-radius: 20rpx;
			padding: 50rpx 30rpx 20rpx;
			position: relative;

			.titleInfo {
				display: flex;
				justify-content: space-between;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 35rpx;
				color: #333333;
				line-height: 70rpx;
				border-bottom: 2rpx dashed #CCCCCC;
			}

			.textTitle {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				line-height: 80rpx;
			}

			.texteInfo {
				width: 100%;
				font-family: PingFang SC;
				font-size: 28rpx;
				color: #666666;
				line-height: 60rpx;
				display: flex;

				.texteLsft {
					width: 150rpx;
				}

				.time {
					flex: 1;
					color: #333333;
				}
			}

			.titleHeavyInfo {
				padding: 2% 0 2% 2%;
				margin-top: 30rpx;
				background: #EDF6FB;
			}

			.btn {
				width: 92%;
				height: 6.6vh;
				background: linear-gradient(-90deg, #00C2D3, #00A7FF);
				border-radius: 4px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				color: #FFFFFF;
				margin-top: 20rpx;
				// position: absolute;
				// bottom: 20rpx;
				// left: 50%;
				// transform: translateX(-50%);
			}
		}

		.popup-content {
			display: flex;
			flex-direction: column;
			position: relative;
			height: 80vh;
			border-radius: 20rpx;
			padding: 20rpx;

			.popup-content-title {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;
				font-weight: 700;
			}

			.popup-content-close {
				position: absolute;
				top: 50rpx;
				right: 20rpx;
			}

			.popup-content-content {
				margin-top: 20rpx;

				.content-select {
					border-bottom: 1px solid #ececec;
					padding-bottom: 20rpx;

					.select-item {
						display: flex;
						align-items: center;
						width: 100%;

						.content-step {
							display: flex;
							flex-direction: column;
							align-items: center;
							width: 60rpx;

							.dot {
								width: 16rpx;
								height: 16rpx;
								background-color: #00aff1;
								border-radius: 50%;
							}

							.undot {
								width: 16rpx;
								height: 16rpx;
								border: 1px solid #00aff1;
								background-color: #ffffff;
								border-radius: 50%;
							}

							.line {
								width: 4rpx;
								height: 30rpx;
								background-color: #00aff1;
							}

							.whiteline {
								width: 4rpx;
								height: 30rpx;
								background-color: #ffffff;
							}
						}

						.content-text {
							display: flex;
							justify-content: space-between;
							flex: auto;
						}
					}
				}

			}

			.area-title {
				padding: 10rpx 20rpx;
				font-weight: 700;
			}

			.popup-content-area {
				flex-grow: 1;
				/* 子元素将扩展以填充父容器的剩余空间 */
				width: 100%;
				overflow-y: scroll;

				.area-content {
					.area-item {
						display: flex;
						justify-content: space-between;
						padding: 10rpx 20rpx;
					}

					.active {
						color: #00A7FF;
					}
				}
			}
		}

		.filterpopup-content {
			width: 70vw;
			padding: 20rpx;

			.filterpopup-title {
				font-weight: 700;
				border-bottom: 1px solid #eaeaea;
				padding-bottom: 14rpx;
			}

			.industry {
				font-size: 24rpx;
				padding: 10rpx 0;

				.industry-title {
					padding: 10rpx 0;
				}

				.industry-content {
					display: flex;
					flex-wrap: wrap;

					.industry-item {

						width: 22%;
						// background: linear-gradient(-90deg, #00C2D3, #00A7FF);
						margin-bottom: 20rpx;
						margin-right: 10rpx;
						background: #bfd5e9;
						border-radius: 30px;
						padding: 10rpx 20rpx;
						text-align: center;

						:deep(.u-tooltip__wrapper__text) {
							display: inline-block;
							width: 100rpx;
							white-space: nowrap;
							/* 不换行 */
							overflow: hidden;
							/* 隐藏超出的内容 */
							text-overflow: ellipsis;
							/* 超出的部分显示为省略号 */
						}

						// :deep(.u-fade-enter-active){
						// 	top: -0rpx !important;
						// }
						// :deep(.u-fade-leave-active){
						// 	top: -170rpx !important;
						// }
					}

					.active {
						background: linear-gradient(-90deg, #00C2D3, #00A7FF);
					}
				}
			}

			.filterpopup-button {
				position: absolute;
				bottom: 0;
				width: 100%;
				display: flex;
				justify-content: space-around;
				margin: 0 40rpx 40rpx 0;

				.reset {
					padding: 10rpx 0;
					text-align: center;
					width: 30%;
					border-radius: 4px;
					border: 1px solid #00ABF7;
					color: #00ABF9;
				}

				.confime {
					padding: 10rpx 0;
					text-align: center;
					width: 30%;
					background: linear-gradient(-90deg, #00C2D3, #00A7FF);
					border-radius: 4px;
					color: #ffffff;
				}
			}
		}
	}
</style>
<style lang="scss">
	page {
		background-color: #fafafa;
	}

	.monitoring {
		:deep(.uni-select) {
			border: unset;
		}
	}
</style>